<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5+2商城</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/detail.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/Underscore-min.js"></script>
    <script src="js/MyFunc.js"></script>
    <script src="js/tishikuang.js"></script>
    <script src="js/jquery.cookie.js"></script>


</head>
<body>
<div >

    <!--头部-->
    <header id="header" class="headers">
        <div id="header_in" class="headers-in">
            <div class="headers-left">
                <ul>
                    <li class="logo-pic" style="margin-top:15px"><h1><a href="index.html">5+2商城</a></h1></li>
                    <li><a href="">发现</a></li>
                    <li><a href="">最新</a></li>
                    <li><a href="">美思</a></li>
                    <li><a href="">活动<span class="new">new</span></a></li>
                    <li><a href="">教育</a></li>
                    <li><a href="">...</a></li>
                </ul>
            </div>
            <div class="headers-center">
                <input id="query" name="query" size="27" type="text" placeholder="搜索你喜欢的" value="">
            </div>
        </div>
    </header>
    <!--快速登录-->
    <!--吸顶效果-->
    <section id="top_nav" class="top-nav">
        <div class="top-nav-in">
            <div class="left">
                <p>国内最优质图片灵感库</p>
                <p>已有数百万出众网友，用花瓣保存喜欢的图片。</p>
            </div>
            <div class="right">
                <ul>
                    <li><p>用社交帐号直接登录：</p></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
            </div>
        </div>
    </section>
    <!--类型标题-->
    <!--选项卡-->
    <div id="tab" class="tab">
        <div id="tab_header" class="tab-header">
        </div>
        <div id="tab_content" class="tab-content">
            <div class="dom" style="display: block">
                <div id="page">
                    <div id="content">

                        <div class="tm-chaoshi-nav" data-spm="1998159256">
                            <div class="layout">
                                <div class="nav-extra">
                                    <div id="cat">商品详情</div>
                                </div>
                            </div>
                        </div>
                        <div class="tm-crumbs">
                            <div class="tm-content">
                                <ul class="nav J_MallCrumbs"></ul>
                            </div>
                        </div>

                        <div id="detail">
                            <div id="J_DetailMeta" class="tm-detail-meta tm-clear">
                                <div class="tm-clear">
                                    <div class="tb-property" style="margin-top: 80px">
                                        <div class="tb-wrap" id="goods_detail">

                                        </div>
                                    </div>
                                    <div class="tb-gallery">
                                        <div class="tb-booth">
                                            <a href=""  id="picbox">

                                            </a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                </div>
            </div>

        </div>
    </div>

<!--右边浮动-->
<div id="elevator_item" class="elevator-item">
    <a onclick="window.scrollTo(0,0);" class="plus"><img src="images/返回顶部.png" alt=""></a>
    <br>
</div>
<!--登录面板-->

<script>

    // var BasicUrl="http://192.168.43.205:8080/52在线商城/";
    var BasicUrl=jQuery.getCookie("BasicUrl");
    var str=location.href; //取得整个地址栏
    var id_str=str.split("=");//分割参数
    var user_id=jQuery.getCookie("userId");
    var isLogin=false; //判断登陆与否
    // console.log(num[1]);

    function Add2car(id) {
        console.log(id);
        if(isLogin===false){
            tishi("请先登陆买家账号再购买");
        }else{
            jQuery.ajax({
                type: 'POST',
                data:{
                    B_id:user_id,
                    P_id:id
                },
                url: BasicUrl+"ServletAddOrders",
                dataType: 'json',
                success: function(datas) {
                    console.log(datas);
                    if(datas.state===true){
                        tishi("已加入购物车");
                    }else{
                        tishi("加入购物车失败，请重试");
                    }
                },
                error: function(xhr, type){
                    tishi('请求失败');
                    // 即使加载出错，也得重置
                }
            });
        }
    }

    function Buy(name,id,price){
        alert(id+","+name+"售价"+price+"确定要购买该商品吗？");
    }
    window.onload=function () {
        if(jQuery.getCookie("userId")!==undefined){
            isLogin=true;
        }

        var goods_car = '<a  href="order_info.html?id=' + user_id + '" id="elevator" class="elevator" title="购物车">'
            + '<img src="images/加入购物车.png" alt=""></a><br>';
        jQuery('#elevator_item').append(goods_car);
        jQuery.ajax({
            //添加请求头以验证用户身份

            type: 'POST',
            url: BasicUrl+ "proById",
            // data:{P_id:id_str[1]},
            data:{P_id:id_str[1]},

            dataType: 'json',
            success: function (datas) {
                // var json_data = JSON.stringify(datas);

                console.log( datas);
                console.log(datas.P_name);
                // console.log(json_data);
                // console.log( JSON.parse(datas));
                    var goods_detail =
                            '<div class="tb-detail-hd">'
                                       +' <h1 id="description" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">'
                                            +datas.P_name
                                        +'</h1> ' 
                                        +'<p>'
                                            +datas.P_desc
                                        +'</p>'
                                    +'</div>'
                                    +'<div class="tm-fcs-panel">'
                                        +'<dl class="tm-price-panel" id="J_StrPriceModBox">'
                                            +'<dt class="tb-metatit">价格</dt>'
                                           + '<dd id="price">'
                                                +datas.P_price
                                            +'</dd>'
                                            +'<dt class="tb-metatit">月销量</dt>'
                                            +'<dd id="salecount">'
                                            +'</dd>'
                                        +'</dl>'
                                    +'</div>'
                                    +'<div class="tb-key">'
                                        +'<div class="tb-skin">'
                                            +'<div class="tb-sku">'
                                                +'<dl class="tb-amount tm-clear">'
                                                    +'<dt class="tb-metatit">数量</dt>'
                                                    +'<dd id="J_Amount">'
                                        +'<span class="tb-amount-widget mui-amount-wrap">'
                                            +'<input type="text" class="tb-text mui-amount-input" value="1" maxlength="8" title="请输入购买量"/>'

                                            +'<span class="mui-amount-unit">件</span>'
                                       +' </span>'
                                                        +'<em id="J_EmStock" >库存<span id="counts">'+datas.P_inventory+'</span>件</em>'
                                                        +'<span >'
                                    +'</span>'
                                                    +'</dd>'
                                                +'</dl>'
                                                +'<div class="tb-action tm-clear">'
                                                   +' <div class="tb-btn-buy tb-btn-sku">'
                                                        +'<a href="">立即购买</a>'
                                                    +'</div>'
                                                    +'<div class="tb-btn-basket tb-btn-sku tm-chaoshi-add" >'
                                                        +'<a onclick="Add2car(\''+datas.P_id+'\')" style="cursor: pointer">加入购物车</a>'
                                                    +'</div>'
                                                +'</div>'
                                            +'</div>'
                                        +'</div>'
                                    +'</div>'
                                +'</div>';
                    var picture='<img src="'+datas.P_image+'" alt="">';
                    jQuery('#goods_detail').append(goods_detail);
                    jQuery('#picbox').append(picture);


            },
            error: function (xhr, type) {
                tishi('请求失败');
            }
        });

    };

        function $$(id) {
            return typeof id === "string" ? document.getElementById(id) : null;
        }

</script>
</body>
</html>